<template>
  <div class="search-store">
    <div class="top">
      <div class="div-input">
        <img src="@/assets/mdsy04.png" alt="">
        <img src="@/assets/mdss02.png" v-if="search_con.length>0" @click="clear" class="cha" alt="">
        <input type="text" v-model="search_con" placeholder="搜索会员名称或绑定手机号">
      </div>
      <span class="search-btn">搜索</span>
    </div>
    <div class="list border-top" v-if="listLength && listLength.length>0">
      <div class="item" @click="router({path: './personDetails'})">
        <div class="name-con">
          <p class="name">张宁(总剩3次）</p>
          <p class="phone">13711486887</p>
        </div>
      </div>
    </div>
    <div class="border-top none" v-else>
      <img src="@/assets/tykt01.png" class="result-none" alt="">
      <p>暂无相关结果</p>
    </div>
  </div>
</template>

<script>

  export default {
    components: {
    },
    data () {
      return {
        listLength: ['1'],
        search_con: ''
      }
    },
    created () {
    },
    methods: {
      router (path) {
        this.$router.push(path)
      },
      clear () {
        this.search_con = ''
      }
    }
  }
</script>

<style lang="stylus" scoped>
.search-store
  background-color #fff
  .top
    position relative
    height 5rem
    .div-input
      background-color #f5f5f5
      height 3.5rem
      width 80%
      position absolute
      left 1.6rem
      border-radius 100px
      top 1rem
      img
        width 1.6rem
        position absolute
        z-index 9
        top 1rem
        left 1.2rem
      input
        width 100%
        padding-left 3.8rem
        position absolute
        left 0
        line-height 3.5rem
        height 3.5rem
        top 0
        background-color #f5f5f5
        border-radius 100px
        box-sizing border-box
        outline none
        border none
        font-size 1.3rem    
      .cha
        width 1.5rem
        position absolute
        right 1.5rem
        left auto
    .search-btn
      position absolute
      width 6rem
      height 5rem
      line-height 5rem
      text-align center
      top 0
      right 0
      font-size 1.5rem
      color #333
  .list
    padding 0 2rem
    background-color #fff
    .item
      padding 1.5rem 0
      border-bottom 1px solid #e6e6e6
      .head-img
        float left
        width 4rem
        margin-right 1.2rem
      .name-con
        .name
          color #333333
          font-size 1.5rem
          font-weight 500
          line-height 1.8rem
          margin-bottom .4rem
        .phone
          font-size 1.2rem
          line-height 1.8rem
          color #999
  .border-top
    border-top 1rem solid #f5f5f5
  .none
    position relative
    background-color #fff
    min-height calc(100vh - 6rem)
    .result-none
      position absolute
      width 7.25rem
      top 12.6rem
      left 50%
      margin-left -3.6rem
    p
      font-size 1.3rem
      color #666
      position absolute
      width 100%
      text-align center
      top 25.2rem
</style>
